<template>
  <div class="dingdan">
    <router-link to="/gou" @click.native="del">
      <div class="jian">
        <span>确定订单</span>
      </div>
      <div class="jian ding1" v-show="xian">
        <span>确定订单</span>
      </div>
    </router-link>
    <!-- 收获地址 -->
    <div class="dizhi">
      <div class="iconfont icon-dizhi di"></div>
      <div class="right">
        <p>
          <span class="name">小明</span>
          <span class="num">18070507233</span>
        </p>
        <router-link to="">
          <div class="shou">收获地址</div>
        </router-link>
      </div>
    </div>

    <!-- 购买的商品 -->
    <div class="gmd" v-for="(val, key) in ding" :key="key">
      <div class="top">
        <span class="img"></span>
        <span>吊灯旗舰店1</span>
      </div>
      <div class="middle">
        <img :src="val.shopSrc" alt="" />
        <div class="r">
          <p>{{ val.shopFont }}</p>
          <p class="kuan">{{ val.addKuan }}</p>
        </div>
        <div class="qian">
          <p>{{ val.shopMoney }}</p>
          <p>
            <span>{{ val.shopCount }}</span>
            <span>X</span>
          </p>
        </div>
      </div>
      <!-- 下面的内容 -->
      <div class="bottom">
        <p>
          <span class="pei">配送方式</span>
          <span class="pu">普通配送</span>
          <span class="kuai">快递 免邮</span>
          <span class="jian_t"></span>
        </p>
        <p class="yun">
          <span class="pei">运费险</span>
          <span class="pu">退换货可赔付10元</span>
          <span class="kuai">
            <span>￥</span>
            <span>{{ val.shopYun }}</span>
            <span>.00</span>
          </span>
          <input type="checkbox" @click="yun($event, key)" />
        </p>
        <p class="dian">
          <span class="pei">店铺优惠</span>
          <span class="pu">省5元:11.00</span>
          <span class="kuai">
            <span>-￥</span>
            <span>{{ val.shopYou }}</span>
            <span>.00</span>
          </span>
          <span class="jian_t"></span>
        </p>
        <p class="ding">
          <span class="pei">订单备注</span>
          <input type="text" placeholder="选填,请先和商家协商一致" />
        </p>
        <p class="gong">
          <span class="pu">
            <span>共</span>
            <span>1</span>
            <span>件</span>
          </span>
          <span class="kuai">小计：</span>
          <span class="ji">
            <span>￥</span>
            <span>{{ val.shopCount * val.shopTotal - val.shopYou }}</span>
          </span>
        </p>
      </div>
    </div>

    <!-- 底部内容 -->
    <div class="footer">
      <router-link to="" @click.native="harvest">
        <span class="ti">提交订单</span>
      </router-link>
      <span class="ji">
        <span>￥</span>
        <span>{{ shop_Total }}</span>
        <span>.00</span>
      </span>
      <span class="kuai">合计：</span>
      <span class="pu">
        <span>共</span>
        <span>{{count}}</span>
        <span>件,</span>
      </span>
    </div>

    <!-- 底部信息 -->
    <footer>
      <div>
        <span>店铺信息</span>
        <div class="xian"></div>
      </div>
    </footer>

    <!-- 向上的图标 -->
    <div class="top_tu" v-show="top" @click="shang">
      <span></span>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      ding: [],
      flag: false,
      count:0,
      top: false, //置顶的图标
      xian:false,//头部
    };
  },
  mounted() {
    /* var that = this;
    //给勾选按钮添加isChecked
    this.ding.map((item) => {
      that.$set(item, "isChecked", true);
    }); */

    // 获取数据
    window.addEventListener("scroll", this.handleScroll, true);
    window.scrollTo(0, 0);
    this.ding = this.$store.state.ding;
    setTimeout(() => {
        // console.log(this.ding.length);
        this.count=this.ding.length;
    }, 200);

  },
  computed: {
    //动态的获取总价
    shop_Total() {
      var newShop = this.ding.filter((val) => {
          return val.isChecked;
        }),
        totals = 0;
      for (var i = 0; i < newShop.length; i++) {
        totals +=
          newShop[i].shopTotal * newShop[i].shopCount - newShop[i].shopYou;
      }
      return totals;
    },
  },
  methods: {
    harvest(){
      this.$router.push({path:"/harvest"});
      // 方法用于将 JavaScript 值转换为 JSON 字符串
      localStorage.setItem('ding',JSON.stringify(this.ding));
      var shop=JSON.parse(localStorage.getItem("shop")); 
      // console.log(shop);
      // 改变isChecked的值取反
        for (var i = 0; i < shop.length; i++) {
          shop[i].isChecked = false;
        }
      // console.log(shop);  
      localStorage.setItem('shop',JSON.stringify(shop));  
    },
    yun(e, id) {
      e.target.checked
        ? (this.ding[id].shopTotal += this.ding[id].shopYun)
        : (this.ding[id].shopTotal -= this.ding[id].shopYun);
    },
    del(){
      this.ding=[];
      this.$store.commit("aaContents", 200);
    },
    shang() {
      // 置顶
      $("html").animate(
        {
          scrollTop: 0,
        },
        200,
        "linear"
      );
    },
    //  管理显示隐藏
    handleScroll() {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      // 向上的图标显示
      if (top > 50) {
        this.top = true;
        this.xian=true;
      } else {
        this.top = false;
        this.xian=false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dingdan {
  // 标题
  .jian {
    font-size: 18px;
    color: #5a5e6a;
    height: 50px;
    line-height: 50px;
  }
  .ding1{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 100;
  }
  .jian::before {
    content: "";
    width: 15px;
    height: 15px;
    border-top: 1px solid #5a5e6a;
    border-left: 1px solid #5a5e6a;
    display: inline-block;
    margin: 10px 10px 0;
    transform: rotate(-45deg);
  }
  // 收获地址
  .dizhi {
    height: 100px;
    margin: 15px;
    border-radius: 10px;
    background-color: #fff;
    .di {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(to right, #ffb372, #fe8e42);
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 25px;
      float: left;
      margin: 35px 10px;
    }
    .right {
      font-size: 13px;
      padding: 23px 0;
      p {
        .name {
          font-size: 15px;
          margin-right: 5px;
        }
        .num {
          color: #949494;
        }
      }
      //   收获地址
      .shou {
        margin-top: 2px;
        height: 30px;
        line-height: 30px;
        // border-top: 1px solid #f0ecec;
        // border-bottom: 1px solid #f0ecec;
        width: 82%;
        margin-left: 50px;
      }
      .shou::after {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 1px solid #5a5e6a;
        border-left: 1px solid #5a5e6a;
        // display: inline-block;
        margin: 10px 10px 0;
        transform: rotate(135deg);
        float: right;
        margin-right: 15px;
      }
    }
  } //dizhi

  //   购买的商品
  .gmd {
    margin: 15px 15px 0 15px;
    border-radius: 10px;
    background-color: #fff;
    padding-bottom: 15px;
    .top {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      .img {
        margin: 12px 10px;
        width: 25px;
        height: 25px;
        background: url(/img/logo.9f4a35a3.png) -22px -5px no-repeat;
        background-size: 288%;
        float: left;
      }
    }
    // tupian
    .middle {
      // width: 100px;
      height: 100px;
      img {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #c6c6c6;
        margin: 0 10px;
        border-radius: 5px;
      }
      .r {
        font-size: 13px;
        width: 150px;
        float: left;
        p {
          color: #353535;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .kuan {
          margin-top: 10px;
          background-color: #fafafa;
          color: #c6c6c6;
          border-radius: 5px;
        }
      }
      .qian {
        float: right;
        margin-right: 15px;
        p {
          font-size: 15px;
          span {
            font-size: 13px;
            float: right;
            color: #b7b7b7;
          }
        }
      }
    }
    // 下面的内容
    .bottom {
      font-size: 13px;
      p {
        margin: 30px 0 0 30px;
        .pei {
          margin-right: 10px;
        }
        .pu {
          color: #b7b7b7;
        }
        .kuai {
          margin-left: 105px;
        }
        .jian_t {
          width: 8px;
          height: 8px;
          border-top: 1px solid #d5d5d5;
          border-left: 1px solid #d5d5d5;
          display: inline-block;
          margin-left: 10px;
          transform: rotate(135deg);
        }
      }
      .yun {
        .kuai {
          font-size: 15px;
          margin-left: 76px;
        }
        // 选中的情况
        input {
          width: 13px;
          height: 13px;
          margin-left: 10px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            background: url("../../public/img/check.png") no-repeat;
            background-size: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            top: -1px;
            left: -1px;
          }
        }
        // 未选中的状态
        input:checked {
          width: 13px;
          height: 13px;
          margin-right: 10px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            background: url("../../public/img/check1.png") no-repeat;
            background-size: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            top: -1px;
            left: -1px;
          }
        }
      }
      .dian {
        .kuai {
          color: #ffa863;
          font-size: 15px;
          margin-left: 97px;
        }
      }
      .ding {
        input {
          outline: none;
          border: transparent;
          width: 230px;
        }
        input:focus::-webkit-input-placeholder {
          color: transparent;
        }
        input::-webkit-input-placeholder {
          color: #adadad;
        }
      }
      .gong {
        margin-bottom: 10px;
        .pu {
          margin-left: 147px;
        }
        .kuai {
          margin-left: 5px;
        }
        .ji {
          color: #ffa863;
          font-size: 15px;
        }
      }
    }
  }

  //   底部内容
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    z-index: 3;
    .pu {
      // margin-left: 115px;
      font-size: 13px;
      color: #a9a9a9;
      float: right;
    }
    .kuai {
      margin-left: 10px;
      float: right;
    }
    .ji {
      font-size: 15px;
      color: #ffa863;
      float: right;
    }
    .ti {
      padding: 10px 20px;
      background: linear-gradient(to bottom, #f5c16a, #c4903b);
      border-radius: 30px;
      height: 40px;
      color: #fff;
      line-height: 20px;
      margin: 5px 10px;
      float: right;
    }
  }
  /* 底部信息 */
  footer {
    width: 100%;
    height: 150px;
    margin-top: 1.332623rem;
    background-color: #efeff4;
    div {
      width: 80%;
      margin: auto;
      text-align: center;
      line-height: 2.665245rem;
      font-size: 16px;
      color: #b7b7b9;
      position: relative;
      span {
        display: inline-block;
        background-color: #efeff4;
        position: relative;
        z-index: 2;
        width: 85px;
      }
      .xian {
        width: 100%;
        border-top: 1px solid #d3d3d4;
        position: absolute;
        top: 50%;
        margin: auto;
      } //footer
    }
  }
  // 置顶图标
  .top_tu {
    width: 1.066098rem;
    height: 1.066098rem;
    border: 0.026652rem solid transparent;
    position: fixed;
    bottom: 70px;
    right: 15px;
    border-radius: 20px;
    background: rgba(151, 113, 37, 0.2);
    text-align: center;
    /* line-height: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-left: 2px solid #977125;
      border-top: 2px solid #977125;
      transform: rotate(45deg);
      margin-top: 6px;
    }
  }
}
</style>